<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CRM客户关系管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<!-- <link rel="stylesheet" href="/gaoa/Public/css/global.css" media="all"> -->
	<!--<link rel="stylesheet" href="/gaoa/Public/plugins/font-awesome/css/font-awesome.min.css"> -->

	<link rel="stylesheet" href="/gaoa/Public/css/element-ui--index.css">


	<style>
	    *{
	    	font-family: microsoft YaHei;
	    }
		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
		.container {
			padding: 2px;
		}
		.container > .wrapp >  .el-row {
			margin-bottom: 10px;
		}
		.el-form--inline .el-form-item {
			margin-bottom: 0px;
		}
/*		#app>.wrapp{
			display: none;
		}*/
		
		/*表格条纹样式*/
		.el-table .info-row {
		background: #ffffff;
		}

		.el-table .positive-row {
		background: #c9e5f5;
		}
		.cell img{
			vertical-align: middle;
		}
		
		.el-date-editor.el-input{
			width: 100%;
			max-width: 370px;
		}

		.el-table__body tr.current-row>td{
	      background: rgba(157, 195, 232, 0.7) !important;
	  }

    @media screen and (min-width:1165px) and (max-width:1200px){
      .el-dialog--small {
          width: 70%;
      }
    }

    @media only screen and (max-width:1164px){
      .el-dialog--small {
          width: 85%;
      }
    }  		
	</style>
	<!-- 如果没有 则 提供一些高级的js功能  -->
	<script src="/gaoa/Public/js/advancejs.js"></script>
	<!-- 不支持IE9 及以下的浏览器 -->
	<!--[if lte IE 9]> 
	<script>
		window.location.href="<?php echo U('login/notsupport');?>";
	</script>
	<![endif]-->
	
	<style>
	  .el-table .info-row {
	    background: #c9e5f5;
	  }

	  .el-table .positive-row {
	    background: #e2f0e4;
	  }

	  .group-item .el-checkbox__label {
	  	display: none;
	  }
 </style>

</head>
<body>
	
	
	<div class="container" id="app">
		<div v-show="show" class="wrapp" style="display:none">
		  <!-- table -->
		  <el-row>
		   <el-col :span="24">
			  <el-table 
			  :data="dataList" 
			  v-loading="dataLoad" 
			  element-loading-text="<?php echo L('DATA_LOGIN');?>" 
			  :row-class-name="tableRowClassName">
			    <el-table-column align="center" type="index"   label="<?php echo L('INDEX');?>" width="100"></el-table-column>
			    <el-table-column align="center" prop="name"    label="<?php echo L('FIELD_NAME');?>"></el-table-column>
			    <el-table-column align="center" prop="remark"  label="<?php echo L('FIELD_REMARK');?>"></el-table-column>
			    <el-table-column inline-template :context="_self" align="center"  label="<?php echo L('FIELD_STATUS');?>" width="100" >
					<div>
				      	<el-switch
						  v-model="row.switch"
						  on-color="#13ce66"
						  off-color="#ff4949" 
						  @change="switchHandle($index, row)">
						</el-switch>
					</div>
			    </el-table-column>
			    <el-table-column 
			    inline-template 
			    :context="_self" 
			    align="center" 
			    label="<?php echo l('OPERATION');?>" 
			    width="250">
			     <div>
			        <el-button
			          size="small"
			          @click="handleEdit($index, row)">
			          <?php echo L('EDIT');?>
			        </el-button>

			        <el-button
			          size="small"
			          type="primary"
			          @click="handleAuthoriz($index, row)">
			          <?php echo L('AUTHORIZE');?>
			        </el-button>

			        <el-button
			          size="small"
			          type="danger"
			          @click="handleDelete($index, row)">
			          <?php echo L('DELETE');?>
			        </el-button>
		       </div>
			    </el-table-column>
			  </el-table>
			 </el-col>
      </el-row>
      <!-- table -->
			<!-- toolbar -->
			<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
			  <el-col :span="12">
			  <div class="grid-content bg-purple">
			  	<span class="wrapper">
			  		<el-tooltip content="<?php echo L('ADD_NEW');?>" placement="right">
					    <el-button size="small"  @click="openDialog('add')" icon="plus" type="primary"><?php echo L('ADD');?></el-button>
				    </el-tooltip>
				  </span>
			  </div>
			  </el-col>
			   <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right" style="display: none">
				    <!-- page -->
				    <el-pagination
  @current-change="handleCurrentPageChange"
  :current-page="currentPage"
  layout="total, prev, pager, next, jumper"
  :total="total"
  :page-size="pageSize"
  ref="pagination"
  >
</el-pagination>
				    <!-- / page -->
				  </div>
			  </el-col>
			</el-row>
			<!-- / toolbar -->
		</div>
		<div v-show="show" style="display:none">
			<!-- 添加 -->
			<el-dialog title="添加角色" v-model="addFormDialog">
   <el-form :model="addForm" id="add-form" :label-width="dialogLabelWidth">
    <el-form-item label="角色名称"  >
      <el-input v-model="addForm.name"  name="name" auto-complete="off" style="max-width: 400px" placeholder="请设置角色名称"></el-input>
    </el-form-item>
    <el-form-item label="角色英文名" >
      <el-select v-model="addForm.ename"  name="ename"   placeholder="请选择">
        <el-option
          v-for="item in enames"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="父级角色"  style="width:400px;">
      <el-select v-model="addForm.pid" placeholder="请选择">
      	<el-option value="0" label="无父级"></el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item label="角色说明" >
      <el-input v-model="addForm.remark" type="textarea"  placeholder="请为角色添加说明"></el-input>
    </el-form-item>

    <el-form-item label="角色状态" >
		<el-radio class="radio" v-model="addForm.status" label="0">禁用</el-radio>
  		<el-radio class="radio" v-model="addForm.status" label="1">启用</el-radio>
    </el-form-item>


<!-- 
    <a style="font-size:16px;font-weight:700;color:#1f2d3d">权限分配</a>
    <el-form-item label="员工管理：" >
		  <el-checkbox-group v-model="checkList">
		    <el-checkbox label="员工列表"></el-checkbox>
		    <el-checkbox label="添加员工"></el-checkbox>
		    <el-checkbox label="修改员工"></el-checkbox>
		    <el-checkbox label="删除员工"></el-checkbox>
		  </el-checkbox-group>
    </el-form-item>
    <el-form-item label="角色管理："  style="margin-top:-20px;">
		  <el-checkbox-group v-model="checkList1">
		    <el-checkbox label="浏览角色"></el-checkbox>
		    <el-checkbox label="添加角色"></el-checkbox>
		    <el-checkbox label="修改角色"></el-checkbox>
		    <el-checkbox label="删除角色"></el-checkbox>
		  </el-checkbox-group>
    </el-form-item>
    <el-form-item label="权限管理："  style="margin-top:-20px;">
		  <el-checkbox-group v-model="checkList2">
		    <el-checkbox label="浏览权限"></el-checkbox>
		    <el-checkbox label="添加权限"></el-checkbox>
		    <el-checkbox label="修改权限"></el-checkbox>
		    <el-checkbox label="删除权限"></el-checkbox>
		  </el-checkbox-group>
		  。。。。。。
    </el-form-item>
 -->

   </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeDialog('add')">取 消</el-button>
     <el-button type="primary" v-show="!addFormSubmitStatus" @click="addFormSubmit(page.addFormUrl, 'add')" >确 定</el-button>
    <el-button type="primary" v-show="addFormSubmitStatus" :loading="true" >添加中</el-button>
  </div>
</el-dialog>
			<!-- /添加 -->

			<!-- 编辑 -->
			<el-dialog title="编辑角色" v-model="editFormDialog">
   <el-form :model="editForm" :label-width="dialogLabelWidth">
    <el-form-item label="角色名称" >
      <el-input v-model="editForm.name" auto-complete="off" style="width:400px;" placeholder="请设置角色名称" v-model="value2"></el-input>
    </el-form-item>
     <el-form-item label="角色英文名" >
      <el-select v-model="editForm.ename"  name="ename"   placeholder="请选择">
        <el-option
          v-for="item in enames"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </el-form-item>

   <!-- <el-form-item label="父级角色"  style="width:400px;">
      <el-select v-model="editForm.pid" placeholder="请选择">
      	<el-option value="0" label="无父级"></el-option>
      </el-select>
    </el-form-item> -->

    <el-form-item label="角色说明" >
      <el-input v-model="editForm.remark" type="textarea" style="width:500px;" placeholder="请为角色添加说明" v-model="editForm.description"></el-input>
    </el-form-item>

    <el-form-item label="角色状态" >
		<el-radio class="radio" v-model="editForm.status" label="0">禁用</el-radio>
  		<el-radio class="radio" v-model="editForm.status" label="1">启用</el-radio>
    </el-form-item>
   </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeDialog('edit')">取 消</el-button>
    <el-button type="primary" v-show="!editFormSubmitStatus" @click="editFormSubmit(page.editFormUrl, 'edit')" >确 定</el-button>
    <el-button type="primary" v-show="editFormSubmitStatus" :loading="true" >修改中</el-button>
  </div>
</el-dialog>
			<!-- /编辑 -->

			<!-- 授权 -->
			<el-dialog title="编辑角色" v-model="setAuthFormDialog">
	<el-form :label-width="dialogLabelWidth">
		<input type="hidden" v-model="setAuthForm.role_id">
		<table class="el-table__body">
			<col name="el-table_1_column_1" width="150">
			<col name="el-table_1_column_2">
			<tbody>
				<tr v-for='item in nodeList' >
					<td align="right" class="group-item">
						{{ item.title }} <el-checkbox v-model='setAuthForm.node' :label="item.id" name="node"></el-checkbox>&nbsp;&nbsp;&nbsp;
					</td>
					<td >
						<el-checkbox-group v-model="setAuthForm.cnode">
							<el-checkbox v-for="action in item['sons']"  :label="action.id"  >{{ action.title }}</el-checkbox>
						</el-checkbox-group>
					</td>
				</tr>
			</tbody>
		</table>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="closeDialog('setAuth')">取 消</el-button>
		<el-button type="primary" v-show="!setAuthFormSubmitStatus" @click="setAuthFormSubmit(page.setAuthFormUrl, 'setAuth')" >确 定</el-button>
		<el-button type="primary" v-show="setAuthFormSubmitStatus" :loading="true" >修改中</el-button>
	</div>
</el-dialog>
			<!-- /授权 -->
		</div>
	</div>

	<script src="/gaoa/Public/js/vue.min.js"></script>
  <script src="/gaoa/Public/js/element-ui--index.js"></script>
	<script src="/gaoa/Public/js/vue-resource.min.js"></script>

	<!-- vue 通用部分  -->
	<script src="/gaoa/Public/js/vueHooks.js"></script>
	<script src="/gaoa/Public/js/vueMethods.js"></script>
	<script src="/gaoa/Public/js/vueOption.js"></script>
	<script src="/gaoa/Public/js/vueCommonLogic.js?b=d"></script>
	<script>
		var page = {
			addFormUrl:"<?php echo U('add');?>",
			editFormUrl:"<?php echo U('edit');?>",
			listUrl:"<?php echo U('getList');?>",
			deleteUrl:"<?php echo U('delete');?>",
			pageSize:<?php echo ($pageSize); ?>
		}
		window.defaultOption = new VueOption();

		// setCommonLogin 还可以再细分
		setCommonLogic(window.defaultOption);


	</script>

	<!-- / vue 通用部分  -->


	<script>
		
		
	</script>


	
	<script>

		var authNodeList = <?php echo json_encode($nodeList);?>;
		var authForm = {};
		authNodeList.forEach(function(currentValue, index){
			authForm[currentValue.id] = false;
			authForm['son'+ currentValue.id] = [];
		})

	</script>
	<script>
		page.setAuthFormUrl = "<?php echo U('setAccess');?>";
		page.getAuthUrl = "<?php echo U('getAccess');?>";

		window.defaultOption.setDatas({
			searchForm:{
				p   : 0,
				name: "",
			},
			nodeList:authNodeList,
			enames:<?php echo json_encode($enames);?>

		}).setForm('status',{
			id:0,
			status:0
		}).setForm('add', {
			name:"",
			// pid:0,
			remark:'',
			status:'1',
			ename:""
		}).setForm('edit', {
			name:"",
			id:"",
			remark:'',
			status:'',
			ename:""
		}).setForm('setAuth',{
			role_id:0,
			node:[],
			cnode:[]
		}, true).setMethod('beforeList', function(dataList){
			dataList.forEach(function(currentValue, index) {
				currentValue['switch'] = currentValue.status == 1 ? true : false;
			})
			return dataList;
		}).setMethod('switchHandle', function(index, row){

			row.status = row.switch ? '0' : '1'; 
			this.initObject(this.statusForm, row);
			this.statusIndex = index;
			var  vmThis = this;
			
			//暂时这样了 这里强耦合
			this.$http.post(page.editFormUrl, this.statusForm).catch(function(response){
				vmThis.$message({
				  message: '状态更改失败',
				  type: 'error'
				});
				vmThis.dataList[vmThis.statusIndex].switch = ! vmThis.dataList[vmThis.statusIndex].switch ;
			});
		}).setMethod('handleAuthoriz', function(index, row){
				this.openDialog('setAuth');
				this.setAuthForm.role_id = row.id;
				var vmThis = this;
				//得到 授权 列表
			this.$http.get(page.getAuthUrl, {params:{role_id: row.id} }).then(function(response){
				var len  = response.body.length;
				
				if (len>0) {
					vmThis.setAuthForm.node = [];
					response.body[0].forEach(function(currentValue){
						console.log(currentValue);
						vmThis.setAuthForm.node.push(currentValue.node_id);
					})
				}

				if (len>1) {
					vmThis.setAuthForm.cnode = [];
					response.body[1].forEach(function(currentValue){
						vmThis.setAuthForm.cnode.push(currentValue.node_id);
					})
				}

				

				
			})



		}).setRowStyle();
		

	</script>

	<script>
	//改modal

		window.defaultVm = new Vue(window.defaultOption.getOption()).$mount('#app');
	</script>
</body>
</html>